<template>
    <div>
        <Form :model="selectObj" inline>
            <FormItem>
                <Input v-model="selectObj.order_no" placeholder="请输入订单编号"/>
            </FormItem>
            <FormItem>
                <Button type="success" @click="search">搜索</Button>
            </FormItem>
            <!--<FormItem>
                <Button type="primary" @click="modaladd('formItem')">添加订单</Button>
            </FormItem>-->
        </Form>
        <Row>
            <Col>
                <Table border :columns="columns1" :loading="tableLoading" :data="data1" class="table">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" class="actionBtn" @click="edit(row, index)">编辑</Button>
                        <Button type="error" size="small" class="actionBtn" @click="remove(row, index)">删除</Button>
                    </template>
                </Table>
            </Col>
        </Row>
        <Modal
                v-model="modal1"
                :title="title1"
                class="modal"
                @on-ok="saves()"
                :loading="btnLoading">
            <Form :label-width="130" ref="formItem" :model="formItem">
                <FormItem label="订单编号：">
                    <Input v-model="formItem.order_no" class="input"></Input>
                </FormItem>
                <FormItem label="下单人：">
                    <Input v-model="formItem.user_id" class="input"></Input>
                </FormItem>
                <FormItem label="下单金额：">
                    <Input v-model="formItem.money" class="input"></Input>
                </FormItem>
                <FormItem label="订单状态：">
                    <Input v-model="formItem.type" class="input"></Input>
                </FormItem>
                <FormItem label="支付时间：">
                    <Input v-model="formItem.pay_time" class="input"></Input>
                </FormItem>
                <FormItem label="套餐编号：">
                    <Input v-model="formItem.combo_id" class="input"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Page class="page" show-total :total="pageObj.totalRecord" @on-change="getPageNo"/>
    </div>
</template>

<script>
import orderManagement from '@/mock/data/order-management'
export default {
  data () {
    return {
      formItem: {},
      btnLoading: true,
      tableLoading: false,
      title1: '',
      selectObj: {
        order_no: ''
      },
      value1: '',
      modal1: false,
      pageObj: {
        pageNo: '1',
        pageSize: '10',
        totalRecord: 1
      },
      columns1: [
        {
          title: '订单编号',
          key: 'order_no',
          align: 'center'
        },
        {
          title: '下单人',
          key: 'user_id',
          align: 'center'
        },
        {
          title: '下单金额',
          key: 'money',
          align: 'center'
        },
        {
          title: '订单状态',
          key: 'type',
          align: 'center'
        },
        {
          title: '支付时间',
          key: 'pay_time',
          align: 'center'
        },
        {
          title: '套餐编号',
          key: 'combo_id',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'create_time',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ],
      data: [],
      data1: []
    }
  },
  mounted () {
    this.getlist()
  },
  methods: {
    getlist () {
      this.tableLoading = true
      if (orderManagement.errcode === 0) {
        this.tableLoading = false
        this.data = orderManagement.data.results
        this.data1 = this.data
        this.pageObj.totalRecord = this.data1.length
      } else {
        this.tableLoading = false
        this.$Message.error('数据获取失败,\n' + orderManagement.errmsg)
      }
    },
    search () {
      let newListData = [] //  用于存放搜索出来数据的新数组
      let search = this.selectObj.order_no
      if (search) {
        this.data.filter(item => {
          if (item.order_no.indexOf(search) !== -1) {
            newListData.push(item)
          }
        })
        this.data1 = newListData
      } else {
        this.data1 = this.data
      }
    },
    modaladd () {
      this.formItem = {}
      this.modal1 = true
      this.title1 = '添加'
      this.btnLoading = true
      let time = this.$common.xeUtils.toDateString(new Date())
      this.formItem.create_time = time
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.getlist()
    },
    edit (row, index) {
      this.title1 = '编辑'
      this.formItem = row
      this.modal1 = true
      this.btnLoading = true
    },
    remove (row, index) {
      let text = '确认删除吗？'
      this.$Modal.confirm({
        title: '提示：',
        content: text,
        loading: true,
        onOk: () => {
          setTimeout(() => {
            this.data1.splice(index, 1)
            this.pageObj.totalRecord = this.pageObj.totalRecord - 1
            this.$Modal.remove()
          }, 700)
        }
      })
    },
    saves () {
      setTimeout(() => {
        if (this.title1 === '添加') {
          this.data1.push(this.formItem)
        }
        this.btnLoading = false
        this.modal1 = false
      }, 700)
    },
    success () {
      this.$Message.success('操作成功')
    }
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .page {
        text-align: right;
        margin-top: 10px;
    }

    .input {
        width: 280px;
    }

</style>
